<template>
	<div class="income_details">
		<div style="position: sticky; top: 0; z-index: 9">
			<header>
				<div>
					<span>累计收益（元）</span>
					<span @click="router.push({ name: 'withdrawalRecord' })"
						>提现明细<van-icon name="arrow" color="#999999"
					/></span>
				</div>
				<div>
					<div class="amount">
						￥<span>{{ state.total_balance }}</span>
					</div>
					<van-button class="btn" type="primary" @click="jumpWithdrawalPage">立即提现</van-button>
				</div>
				<div style="font-size: 14px;margin-top: 10px">
					<span>可提现￥{{ state.balance }}</span>
					<span style="width: 35%">已提现￥{{ state.balance_history }}</span>
				</div>
				<div style="font-size: 14px">
          <span>冻结中￥{{ state.commission }}</span>
          <span style="width: 35%">已失效￥{{ state.shixiaoCommission }}</span>
				</div>
			</header>

			 <van-tabs
				v-model:active="state.active"
				line-width="30px"
				line-height="4px"
				color="#F84B9B"
				title-inactive-color="#999999"
        :before-change="tabsBeforeChange"
			>
				<van-tab v-for="item of state.tabs" :title="item" :key="item"></van-tab>
			</van-tabs>
		</div>

		<van-list
			class="list"
			v-model:loading="state.loading"
			:finished="state.finished"
			finished-text="没有更多了"
			@load="getMyCommissionRecords"
		>
			<div class="list_item" v-for="item of state.commissionRecords">
				<div class="header">
					<span>{{ item.describe }}</span>
					<!-- <span>在途收益</span> -->
				</div>
				<div class="info">
					<van-image round width="38px" height="38px" fit="cover" lazy-load :src="userHeadImg(item)" />
					<div class="right">
						<div class="">
							<span>{{ mainStore.storeIsLogin?mainStore.storeInfo.title:item?.nick_name }}</span>
							<span v-if="item.zj_state == 0" style="color: #f82254; font-size: 17px">+{{ item.amount }}</span>
							<span v-if="item.zj_state == 1" style="color: #616060; font-size: 17px">{{ item.amount }}</span>
							<span v-if="item.zj_state == 2" style="color: #000000; font-size: 17px">{{ item.amount }}</span>
						</div>
						<div class="time">时间：{{ item.add_time }}</div>
					</div>
				</div>
			</div>
		</van-list>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store/index';
import { myCommissionRecords,getAmountByMemberBalance } from '@/api/my';
import {Toast} from "vant";

const imgUrl = import.meta.env.VITE_IMG_URL;
const router = useRouter();
const mainStore = useMainStore();
const state = reactive<any>({
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id,
    state:0
	},
	active: 0,
	loading: false,
	finished: false,
	tabs: ['可提现', '冻结中', '已失效'],
	commissionRecords: [],
  total_balance:0,
  balance:0,
  commission:0,
  shixiaoCommission:0,
  balance_history:0
});

// 头像
const userHeadImg = (item:any) : string => {
  if (mainStore.storeIsLogin) {
    if (mainStore.storeInfo.storeimgs) {
      return imgUrl + mainStore.storeInfo.storeimgs
    } else {
      return item.head_img_url
    }
  } else {
    return item.head_img_url
  }
}

// const totalAmount = computed<string>(() => {
// 	return state.commissionRecords.reduce((pre: any, val: any): string => {
// 		return (Number(pre) + Number(val.amount)).toFixed(2);
// 	}, 0);
// });

// 跳转提现页面
const jumpWithdrawalPage = () => {
  if (typeof mainStore.userInfo.audit_state != 'undefined' && mainStore.userInfo.audit_state != 1) {
    if (mainStore.userInfo.audit_state == 0) return Toast('您的资料正在审核中');
    if (mainStore.userInfo.audit_state == 2) return Toast('您的资料审核未通过');
  } else {
    if ((!mainStore.userInfo?.identity || mainStore.userInfo?.identity == '0')) {
      router.push('/registered');
      return;
    }
    router.push({name: 'withdrawal'})
  }
}

onMounted(() => {
  findAmountByMemberBalance();
});

// tab切换
const tabsBeforeChange = (name: number | string): boolean => {
  state.pageInfo.state = name;
  state.pageInfo.pageIndex = 1;
  state.commissionRecords = [];
  getMyCommissionRecords();
  return true;
};

const getMyCommissionRecords = async () => {
  if (mainStore.storeIsLogin) {
    state.pageInfo.user_id = mainStore.storeInfo.member.user_id
  }
	const res = await myCommissionRecords(state.pageInfo);
	let { dataList } = res.data;
	if (dataList.length) {
		state.pageInfo.pageIndex++;
		state.commissionRecords = [...state.commissionRecords, ...dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
	console.log(res);
};

const findAmountByMemberBalance = async () => {
  let user_id:number;
  if (mainStore.storeIsLogin) {
    user_id = mainStore.storeInfo.member.user_id
  } else {
    user_id = state.pageInfo.user_id
  }
	const res = await getAmountByMemberBalance({user_id:user_id});
	let data = res.data;
	state.total_balance = data.total_balance
	state.balance = data.balance
	state.commission = data.commission
	state.shixiaoCommission = data.shixiaoCommission
	state.balance_history = data.balance_history
	console.log(res);
};
</script>

<style lang="scss" scoped>
:deep(.van-tabs) {
	width: 100%;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;

	.van-tabs__wrap {
		height: 50px !important;
		.van-tabs__nav {
			justify-content: space-between;
			.van-tab {
				flex: auto;
				padding: 0;
				font-size: 13px;
			}
			.van-tab--active {
				font-size: 14px;
				font-weight: bold;
			}
		}
	}
}
.income_details {
	header {
		@include flx-direction-between;
		height: 140px;
		box-sizing: border-box;
		padding: 20px 15px;
		font-size: 13px;
		background: white;
		& > div {
			@include flx-justify-between;
		}
		.amount {
			font-size: 20px;
			font-weight: 400;
			span {
				font-size: 33px;
			}
		}
		.btn {
			height: 25px;
			padding: 0 10px;
			border: none;
			border-radius: 13px;
			font-size: 12px;
			line-height: 25px;
			background: linear-gradient(-84deg, #f53d7d, #fb56b3);
		}
	}
	.list {
		padding: 10px 15px 0 15px;
		.list_item {
			//height: 116px;
			box-shadow: 0px 1px 2px 0.5px rgba(153, 153, 153, 0.2);
			border-radius: 3px;
			margin-bottom: 10px;
			.header {
				@include flx-justify-between;
				height: 40px;
				padding: 0 10px;
				border-bottom: 1px solid #e6e6e6;
				font-size: 11px;
				color: #666666;
			}
			.info {
				@include flx-justify-between;
				align-items: flex-start;
				padding: 10px 15px 20px 15px;
				.right {
					flex: 1;
					margin-left: 15px;
					font-size: 15px;
					color: #1a1a1a;
					div {
						@include flx-justify-between;
					}
					.time {
						margin-top: 5px;
						color: #666666;
						font-size: 12px;
					}
				}
			}
		}
	}
}
</style>
